// 产品详情页
<template>
  <div>
    <!-- <header-ad></header-ad> -->
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav></goods-nav>

    <div class="container">
      <div class="w1200">
        <h1>
          <router-link to="/" tag="span" style="cursor: pointer;">首页</router-link>>
          <router-link to="/productList" tag="span" style="cursor: pointer;">商品分类 ></router-link>
          <span v-if="myNavSwich">
            <span
              @click="regression"
              style="cursor: pointer;"
              v-if="$store.state.HandleNodeClick.name"
            >{{$store.state.HandleNodeClick.name}} ></span>
          </span>

          <span style="cursor: default;">{{info.title}}</span>
        </h1>
        <over-view
          :brand="brand"
          :info="info"
          :miniBanners="miniBanners"
          :SpecificationType="SpecificationType"
          v-loading="loading"
        ></over-view>
        <!--概览的部分 -->
        <other-models :tableData="tableData" v-if="tableData.length"></other-models>
        <!--其他型号-->
        <productdetails-ad></productdetails-ad>
        <div class="details">
          <selectionof-goods></selectionof-goods>
          <productdetails-parameter :parameter="info.parameter"></productdetails-parameter>
        </div>
        <div>
          <your-like :listsz="product"></your-like>
        </div>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
import goods from "../../assets/images/goods1.png" // 图片

import overView from "./components/Overview" // 上面的商品 概览区域
import otherModels from "./components/OtherModels" // 其他型号
import productdetailsAd from "./components/Ad" // 广告区域
import productdetailsParameter from "./components/Parameter" //  产品详情  商品规格
import selectionofGoods from "./components/Selectionofgoods" //  精选商品
import yourLike from "./components/YourLike" //  猜你喜欢

export default {
  name: "ProductDetails",

  data() {
    return {
      myNavSwich: false,   // 是否显示  
      SpecificationType: {}, // 規格型號
      loading: false,
      tableData: [],
      miniBanners: [], // 小的banner图片的数据存储 字符串要先截成数组
      brand: {}, // 所屬品牌的模塊
      info: {}, //详细信息
      like: [], // 猜你喜欢的信息
      product: {
        title: "猜你喜欢",
        lists: [
          {
            imgsrc: goods,
            name: "SUS304定位销",
            describe: "交期大幅度缩短",
            price: "134.00",
            originalPrice: "299.99",
            id: 0,
            pid: 0
          },
          {
            imgsrc: goods,
            name: "SUS304定位销",
            describe: "交期大幅度缩短",
            price: "134.00",
            originalPrice: "299.99",
            id: 1,
            pid: 1
          }
        ]
      }
    }
  },

  beforeRouteEnter(to, from, next) {
    console.log('from:', from)

    next(vm => {
      console.log(vm.myNavSwich)
      if (!from.name) {
        vm.myNavSwich = true
        console.log('1111111111111111111111111111')
      } else {
        vm.myNavSwich = false
        console.log('0000000000000000000000000000')
      }
      console.log(vm.myNavSwich)
    })
  },

  components: {
    overView,
    otherModels,
    productdetailsAd,
    productdetailsParameter,
    selectionofGoods,
    yourLike
  },

  methods: {

    // 回退上一级
    regression() {
      let good = this.$store.state.HandleNodeClick
      console.log(good)
      this.$router.push({
        name: "productList",
        params: {
          id: good.id,
          item: good
        }
      })
    },

    // 修复刷新后页面消失的bug
    _IDPID() {
      console.log('this.$route.query.id:', this.$route.query.id)
      console.log('this.$route.query.pid:', this.$route.query.pid)
      let IDPID = {}
      if (this.$route.query.id) {
        IDPID = {
          id: this.$route.query.id,
          pid: this.$route.query.pid

        }
        this.$store.commit("IDPID", IDPID)
      } else if (this.$route.params.id && this.$route.params.pid) {
        IDPID = {
          id: this.$route.params.id,
          pid: this.$route.params.pid,
        }
        this.$store.commit("IDPID", IDPID)
      } 
    },

    // 明日研究
    async getModelInfo(id, style_id) {
      // console.log([id,style_id])
      let res = await this.$http({
        method: 'post',
        url: 'index/api/goodsByStyleId',
        data: {
          id,
          style_id
        }
      })

      if (res.data.State.Code == 200) {
        this.tableData = []
        this.tableData = res.data.data
      } else if (res.data.State.Code == 2005) {
        this.tableData = []
      }
      console.log('其他型号的数据', this.tableData)
    },
    
    async likeInfo(cate_id) {
      let res = await this.$http({
        method: 'post',
        url: 'index/api/recommendGoods',
        data: {
          cate_id
        }
      })
      if (res.data.State.Code == 200) {
        this.product.lists = res.data.data
        // console.log(res.data.data)
      }
    },

    httpInit() {
      this.loading = true
      this.$http({
        method: "post",
        url: `home/goods_details/index`,
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          id: this.$store.state.id,
          pid: this.$store.state.pid
        }
      })
        .then(res => {
          const _data = res.data
          if (_data.State.Code == 200) {
            console.log(_data.data)
            this.brand = _data.data.brand
            this.info = _data.data.info
            this.SpecificationType = _data.data.style
            this.$store.commit("cateId", _data.data.info.cate_id)  // 精选商品的id存储
            console.log(this.info.image)
            this.tableData = _data.data.recommend
            this.miniBanners = this.info.image.split("|")

            let id = this.info.id
            let style_id = this.info.style_id
            this.getModelInfo(id, style_id)
            let cate_id = this.info.cate_id
            this.likeInfo(cate_id)

            this.loading = false

          } else if (_data.State.Code == 400) {
            console.log('该产品缺少pid...')
            this.$notify.error({
              title: " 抱歉 ：数据出错...",
              message: "请先浏览其他产品..."
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }

  },
  computed: {
    goodName() {
      return this.$store.state.item
    }
  },
  // 用来检测当前页面的点击事件的刷新的
  watch: {
    $route(to, from) {
      this._IDPID()
      this.httpInit()
    }
  },

  mounted() {
    this._IDPID()
    this.httpInit()
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  border-top: #dddddd solid 2px;
  .w1200 {
    width: 1200px;
    margin: auto;
    h1 {
      width: 80%;
      padding-left: 12px;
      border-left: 4px solid #a2a2a2;
      font-size: 14px;
      line-height: 14px;
      font-weight: normal;
      color: #3a3a3a;
      margin: 21px 0px;
    }
    .details {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>
